<template>
    <div>
        <van-tabbar v-model="active" fixed active-color="#d92626">
            <van-tabbar-item icon="shop" to="/index" size="2em">首页</van-tabbar-item>
            <van-tabbar-item icon="goods-collect" to="/dukascopy" size="2em">dukascopy</van-tabbar-item>
            <van-tabbar-item icon="todo-list" to="/notice/list" size="2em">新闻资讯</van-tabbar-item>
            <van-tabbar-item icon="gold-coin" to="/capital">证券商</van-tabbar-item>
            <van-tabbar-item icon="friends" to="/home">个人中心</van-tabbar-item>
        </van-tabbar>
        <router-view style="padding-bottom: 50px;"></router-view>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                active: 0,
            }
        },
        methods: {
            init(){
                
                if(this.$route.path === '/index'){
                    this.active = 0;
                }else if(this.$route.path === '/dukascopy'){
                    this.active = 1;
                }else if(this.$route.path === '/notice/list'){
                    this.active = 2;
                }else if(this.$route.path === '/capital'){
                    this.active = 3;
                }else if(this.$route.path === '/home'){
                    this.active = 4;
                }
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style>
    .van-icon-gold-coin:before,.van-icon-friends:before,.van-icon-todo-list:before{
        font-size: 20px;
    }
</style>